<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兔百宝工具箱</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        .tit {
            font-size: 30px;
            font-weight: bold;
            color: #f89155;
            margin: 8px 8px 10px 8px;
            /* text-align: center; */
        }

        .tool {
            padding: 20px 0 20px 0;
            /* text-align: center; */
            font-size: 26px;
            font-weight: bold;
        }

        /* 类别区域 */
        .class-box {
            -webkit-user-select: none;
            /* Chrome/Safari */
            -moz-user-select: none;
            /* Firefox */
            -ms-user-select: none;
            /* IE10+ */
            user-select: none;
            /* 标准属性 */
        }

        /* 分类标题 */
        .card-boxtt {

            margin: 20px 0 10px 10px;
            max-height: 40px;
            border-bottom: #000000 1px solid;
            font-family: "黑体", "微软雅黑", serif;
            font-weight: bolder;
            font-size: 20px;

        }

        /* 卡片区域*/
        .card-box {
            display: flex;
            flex-wrap: wrap;
        }

        /* 卡片样式 */
        .card {
            display: flex;
            border-radius: 5px;
            background-color: #ffefe0;
            box-shadow: 3px 3px 10px #cacaca;
            border: 1px solid #999999;
            height: 85px;
            min-width: 300px;
            max-width: 300px;
            margin: 10px;
            flex-direction: column;
        }

        .card:hover {
            cursor: pointer;
        }

        .card:active {
            transform: scale(0.99);
            transition: 0.01s;
            box-shadow: 0 0 50px #b9b9b9 inset;
        }

        .cardtt {
            margin: 16px 0 10px 16px;
            font-family: "宋体", "微软雅黑", serif;
            font-weight: bolder;
            color: #000000;
            font-size: 22px;

        }

        .cardex {
            margin: 0 0 0 16px;
            font-family: "宋体", "微软雅黑", serif;
            color: #5c5c5c;
        }
    </style>
</head>

<body>
    <a href="http://www.toolbb.cn">
        <img src="pagelogo.png" alt="www.toolbb.cn" height="80px">
    </a>


    <!-- #region 小工具类 -->
    <!-- 小工具类 -->
    <div class="class-box">
        <div class="card-boxtt">
            小工具🔧
        </div>

        <div class="card-box">
            <!-- 卡片标准模板 -->
            <div class="card" onclick="location.href='NameGeneratotPage/NameGeneratotPage.html'">
                <div class="cardtt">
                    姓名生成器
                </div>
                <div class="cardex">
                    一个快速批量生成人名的小工具
                </div>
            </div>

            <div class="card" onclick="location.href='Counter/Counter.html'">
                <div class="cardtt">
                    计数器
                </div>
                <div class="cardex">
                    吃饺子时可以用
                </div>
            </div>

            <div class="card" onclick="location.href='Scoreboard/Scoreboard.html'">
                <div class="cardtt">
                    比赛记分板
                </div>
                <div class="cardex">
                    单局计分及大比分计分
                </div>
            </div>

            <div class="card" onclick="location.href='Snookerscoreboard/Snookerscoreboard.html'">
                <div class="cardtt">
                    斯诺克记分板
                </div>
                <div class="cardex">
                    斯诺克专用计分板
                </div>
            </div>

            <div class="card" onclick="location.href='BabyLog/BabyLog.html'">
                <div class="cardtt">
                    宝宝日志编辑器
                </div>
                <div class="cardex">
                    用于编辑及记录宝宝日记
                </div>
            </div>

            <div class="card" onclick="location.href='DoughRatio/DoughRatio.html'">
                <div class="cardtt">
                    面水比例计算器
                </div>
                <div class="cardex">
                    用于计算和面时面和水的比例
                </div>
            </div>
        </div>
    </div>
    <!-- #endregion -->

    <!-- #region 纸牌游戏类 -->
    <!-- 纸牌游戏类 -->
    <div class="class-box">

        <div class="card-boxtt">
            纸牌游戏🃏
        </div>

        <div class="card-box">
            <div class="card" onclick="location.href='GDYrule/GDYrule.html'">
                <div class="cardtt">
                    干瞪眼规则
                </div>
                <div class="cardex">
                    一种扑克牌玩法的规则
                </div>
            </div>

            <div class="card" onclick="location.href='GDYScorer/GDYScorer.html'">
                <div class="cardtt">
                    干瞪眼计分器
                </div>
                <div class="cardex">
                    干瞪眼扑克游戏的计分器
                </div>
            </div>
        </div>
    </div>
    <!-- #endregion -->

</body>

</html>